<!-- 消息一级页面 -->
<template>
<view>
<!--  <view class="nav-box" :style="phoneHeight">
    <view class="nav-top-one">
      <view>消息中心</view>
    </view>
  </view> -->
  <view class="messageBox">
    <!-- 无数据 -->
    <view class="messageNone" v-if="res=== '' ">
      <image src="../../static/images/message.png" mode="" class="messageImg"></image>
      <view class="NoneTxt">
        暂无消息
      </view>
    </view>
    
    <!-- 有数据 -->
     <scroll-view v-else class="messageList" scroll-y enable-back-to-top>
       <!-- 简单数据 -->
<!--       <view class="messageTime">
         2023-11-30-19:20
       </view> -->
      <view class="messageData" v-for="item in listRes" :key="item.id">
        <!-- 消息盒子顶部 -->
        <view class="mData_Top" >
          <view class="mDataImgBg">
            <image src="../../static/icons/折线.png" mode="" class="mDataIcon" ></image>
            <!-- <image src="../../static/icons/设置.png" mode="" class="mDataIcon" ></image> -->
            <!-- <image src="../../static/icons/任务.png" mode="" class="mDataIcon" ></image> -->
          </view>

          <view class="mDataTit">
            {{item.subject}}
          </view>
          <view class="mDataTime">
            {{item.updateTime}}
          </view>
        </view>
        <!-- 消息盒子正文 -->
        <view class="mDataTxt">
         {{item.detail}}
        </view>
      </view>
     </scroll-view>
  </view>
</view>
</template>

<script>
  import http from '@/utils/http.js'
export default {
  name: "qx-topBar",
  async created () {
    const res = await http({
      method:'get',
      url:'/message/list'
    })
    console.log(res)
    this.listRes = res
  },
  data() {
    return {
      phoneHeight: '', //这里在进行调用
      listRes:''
    };
  },
  onReady() {
    this.getPhoneHeight();
    // console.log(this.phoneHeight);
  },
  methods: {
    getPhoneHeight() { //获取高度
      let that = this;
      uni.getSystemInfo({
        success: function (res) {
          // console.log(res)
          that.phoneHeight = `margin-top:${res.statusBarHeight+50}rpx`;
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.nav-box {
  background: #ffffff;
  height: 76rpx;
}
.nav-top-one {
  text-align: center;
}

.messageBox {
  width: 100%;
  height: 100vh;
  padding: 0 26rpx;
  background-color: #f5faf9;
  position: relative;
  // 无数据情况
  .messageNone {
    width: 500rpx;
    height: 500rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .messageImg {
      width: 500rpx;
      height: 400rpx;
    }
    .NoneTxt {
      text-align: center;
      margin-left: -5%;
    }
  }
  // 消息列表
  .messageTime {
    text-align: center;
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #c2c2c2;
  }
  .messageList {
    box-sizing: border-box;
    .messageData {
      background-color: #fff;
      box-shadow: 5rpx 5rpx 10rpx rgba(0,0,0,0.3);
      border-radius: 15rpx;
      padding: 30rpx 20rpx 40rpx;
      margin: 30rpx 5rpx;
      .mData_Top {
        height: 90rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;
        text-align: center;
        // line-height: 90rpx;
        .mDataImgBg {
          flex-shrink: 0;
          width: 70rpx;
          height: 70rpx;
          line-height: 80rpx;
          border-radius: 50%;
          // background-color: #ccc;
          background-color: #ff8f94;
          text-align: center;
          .mDataIcon {
            width: 36rpx;
            height: 36rpx;
          }
        }
        .bgc1 {
          background-color: #ff8f94;
        }
        .bgc2 {
          background-color: #8c86f3;
        }
        .bgc3 {
          background-color: #4799ff;
        }
        .mDataTit {
          width: 380rpx;
          height: 100rpx;
          text-align: left;
          line-height: 80rpx;
          font-weight: 700;
          margin-left: 10rpx;
        }
        .mDataTime{
          height: 120rpx;
          line-height: 80rpx;
          font-size: 20rpx;
          color: #ccc;
          flex-wrap: nowrap;
        }
        
      }
      .mDataTxt {
        margin-top: 10rpx;
        margin-left: 10rpx;
        color: #676767;
        font-size: 22rpx;
        white-space: normal; /* 允许换行 */
        overflow: hidden; /* 溢出部分隐藏 */
        text-overflow: clip; /* 溢出时换行 */
      }
    }
  }
}


</style>
